<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
<meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
<title>Hello APP</title>
<link rel="stylesheet" type="text/css" href="../../css/aui-flex.css" />
<link rel="stylesheet" type="text/css" href="../../css/aui.css" />
<link rel="stylesheet" type="text/css" href="../../css/common.css" />
<style>
	.leftFix {
		position: fixed;
		left: 0;
		top: 0;
		width: 4.4rem;
		height: 100%;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
		z-index: 5;
	}
	.catList li {
		position: relative;
		line-height: 2.5rem;
		text-align: center;
		font-size: 0.6rem;
		color: #171518;
		background: #F7F7F6;
		border-bottom: 1px solid #FFF;
		transition: all 0.25s ease;
	}
	.catList li.active {
		color: #E73350;
		background: #FFF;
	}
	.catList li.active:before {
		content: "";
		position: absolute;
		left: 0;
		top: 50%;
		width: 0.2rem;
		height: 90%;
		background: #E73350;
		-webkit-transform: translateY(-50%);
		transform: translateY(-50%);
	}
	.catList::-webkit-scrollbar {
        display: none;
    }
	.content {
		padding-left: 4.4rem;
		height: 100vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}
	.subList {
		padding: 0.6rem 0.75rem;
	}
	.subList li {
		width: 33.333%;
		padding: 0.5rem;
		color: #555;
		font-size: 0.6rem;
		text-align: center;
	}
	.subList li .photo {
		margin-bottom: 0.35rem;
		height: 0;
		padding-bottom: 100%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: cover;
		/* background-color: #eee; */
	}
	@media all and (max-width: 350px){
		.subList li {
			padding: 0.25rem;
		}
	}
</style>
</head>
<body>
	<div id="data_html"></div>
	<script type="text/x-dot-template" id="data_tpl">
		<ul class="leftFix catList">
			{{ for(var i in it) { }}
			{{ if(i){ }}
			<li class="" data-cat="" tapmode onClick="changeTab(this);">{{= i}}</li>
			{{ } }}
			{{ } }}
		</ul>
		<div class="content">
			{{ for(var i in it) { }}
			{{ if(i){ }}
			<ul class="subList aui-flex-col aui-hide">
				{{ for(var n in it[i]) { }}
				<li data-catid="{{= it[i][n].class_parent_id}}" data-subcatid="{{= it[i][n].class_id}}" tapmode onClick="openCat(this);">
					<div class="photo" style="background-image: url({{= it[i][n].class_icon}});"></div>
					<div class="txt">{{= it[i][n].class_name}}</div>
				</li>
				{{ } }}
			</ul>
			{{ } }}
			{{ } }}
		</div>
	</script>

</body>
<script type="text/javascript" src="../../script/import.js"></script>
<script type="text/javascript" src="../../script/common.js"></script>
<script type="text/javascript">
apiready = function(){
	api.parseTapmode();
	getData();
};
function getData(){
	api.ajax({
		url: BASE_URL + 'App/Select/category',
		method: 'get'
	},function(ret,err){
		if (ret && ret.code == 1) {
			var tpl = $$('#data_tpl').html();
			var tempFn = doT.template(tpl);
			$$('#data_html').html(tempFn(ret.data));
			api.parseTapmode();
			$$('.catList li').eq(0).addClass('active');
			$$('.content .subList').eq(0).removeClass('aui-hide');
		} else {
			toast('获取失败');
		};
	});
}
//切换大分类
function changeTab(el){
	var _this = $$(el);
	var ind = _this.index();
	$$('.catList li').removeClass('active').eq(ind).addClass('active');
	$$('.content .subList').addClass('aui-hide').eq(ind).removeClass('aui-hide');
}
//跳转到分类页面
function openCat(el){
	var _this = $$(el);
	var catId = _this.data('catid');
	var subCatId = _this.data('subcatid');
	var catName = $$('.catList li.active').text();
	api.openWin({
		name: 'product_list_win',
		url: 'product_list_win.html',
		pageParam: {
			pageTitle: catName,
			catId: catId,
			subCatId: subCatId
		}
	});
}
</script>
</html>
